<template>
  <div class="container">
    <TableWrapper :title="'登陆日志'">
      <!-- 搜索头 -->
      <template #header>
        <el-form ref="form" :model="query" label-width="100px" :inline="true">
          <el-form-item label="登录人员：">
            <el-input
              style="width: 220px"
              v-model="query.userName"
              placeholder="请输入登录人员"
            ></el-input>
          </el-form-item>

          <el-form-item label="登录结果：">
            <el-select
              v-model="query.status"
              style="width: 220px"
              placeholder="请选择登录结果"
            >
              <el-option
                v-for="item in [
                  { label: '登录成功', value: '0' },
                  { label: '登录失败', value: '1' },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="登陆时间：">
            <el-date-picker
              style="width: 220px"
              v-model="query.loginDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item class="ml15">
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="searchChange"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh-left" @click="searchReset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </template>

      <!-- 数据表 -->
      <template #main>
        <el-table
          :data="data"
          style="width: 100%"
          :header-cell-style="headStyle"
        >
          <el-table-column align="center" type="selection" width="60">
          </el-table-column>
          <el-table-column align="center" prop="infoId" label="日志ID">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="用户账号">
          </el-table-column>
          <el-table-column align="center" prop="ipaddr" label="登录地址">
          </el-table-column>
          <el-table-column align="center" prop="accessTime" label="访问时间">
          </el-table-column>
          <el-table-column align="center" prop="status" label="登录状态">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === '0' ? 'success' : 'danger'"
                disable-transitions
                >{{
                  scope.row.status === "0" ? "登录成功" : "登录失败"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="msg" label="提示信息">
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页器 -->
      <template #footer>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </template>
    </TableWrapper>
  </div>
</template>

<script>
import { getList } from "@/api/system/logininfor.js";
import TableWrapper from "@/components/Table/TableWrapper.vue";

export default {
  components: { TableWrapper },
  data() {
    return {
      // 详情数据
      form: {},
      // 搜索数据
      query: {},
      // 分页数据
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      // 多选数据
      selectionList: [],
      // 表数据
      data: [],
    };
  },
  methods: {
    // 搜索重置
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    // 搜索点击
    searchChange() {
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    // 多选发生改变
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
    },
    // 当前分页发生改变
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page, this.params);
    },
    // 分页大小发生改变
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page, this.params);
    },
    // 重载数据
    onLoad(page, params = {}) {
      let values = {
        ...params,
      };

      // 传递日期
      if (values.loginDate && values.loginDate.length == 2) {
        values.beginTime = params.loginDate[0];
        values.endTime = params.loginDate[1];
      }

      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(values, this.query)
      ).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    // 自定义表头颜色
    headStyle({ row, rowIndex }) {
      if (rowIndex === 0) {
        return {
          backgroundColor: "#F8FAFF",
          fontWeight: 800,
          color: "#515a6e",
        };
      }
    },
  },
  // 页面加载时触发
  created() {
    this.onLoad(this.page, this.params);
  },
};
</script>